<template>
    <RouterView @child-event="handleChildEvent"/>
    <van-tabbar v-model="active">
        <van-tabbar-item v-for="item in router.options.routes[0].children"
                         :key="item.path"
                         :icon="item.meta.icon"
                         :url="`#/${item.path}`"
        >{{ item.meta.name }}</van-tabbar-item>

    </van-tabbar>

</template>

<script setup>
    import {ref,onMounted, watch,getCurrentInstance  } from 'vue'
    import { useRouter, useRoute} from 'vue-router'
    const router = useRouter();
    const route= useRoute();
    const active = ref(0);
    const { proxy } = getCurrentInstance();

    onMounted(()=>{
        console.log('');
        const data = router.options.routes[0];
        active.value = data.children.findIndex(item => '/' + item.path === route.path);
    });

    // 处理来自 user.vue 的自定义事件
    const handleChildEvent = (path) => {
      console.log('handle event ',path)
      // 更新 active 值
      const data = router.options.routes[0];
      active.value = data.children.findIndex(item => item.path === path);
    };

</script>

<style scoped>

</style>
